import styled from 'styled-components';
import * as React from 'react';
import { useState } from 'react';
import { CategoryList, SettingsView } from './components';

export const SettingsPage = () => {

    const [category, setCategory] = useState<string>('account');

    return (
        <Container>
            <CategoryContainer>
                <CategoryList category={category} onChange={(category, item) => {
                    setCategory(category)
                }}></CategoryList>
            </CategoryContainer>
            <TemplateContainer>
                <SettingsView category={category} onClick={(category, item) => {
                    alert(category);
                }}></SettingsView>
            </TemplateContainer>
        </Container>
    );
}

export default SettingsPage;


const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
`;

const CategoryContainer = styled.div`
    height: 100%;
    width: 220px;
    background-color: #fff;
    overflow-y: auto;
`;


const TemplateContainer = styled.div`
    height: 100%;
    flex: 1;
    background-color: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: flex-start;
`;
